/**
 * 省略号文本生成器
 */
var ellipsisTextGenerator ={
    calculateElement:null,
    dot:'.',
    /**
     * 创建计算的元素
     * @param {*} fontSize 
     */
    _createCalculateElement:function() {
        if(this.calculateElement !== null){
            return;
        }
        this.calculateElement=document.createElement("div");
        var ele = this.calculateElement;
        ele.style.display = "none";
        document.body.appendChild(ele);
    },
    /**
     * 移除计算的元素
     */
    _removeCalculateElement:function() {
        if(this.calculateElement === null){
            return;
        }
        document.body.removeChild(this.calculateElement);
        this.calculateElement=null;
    },
    /**
     * 获取单个字符宽度
     * @param {*} char 字符
     * @param {*} fontSize 字体大小 如 12px
     */
    getCharWidth:function(char,fontSize) {
        if(char.length>1){
            throw Error("字符最多只能有一个");
        }
        if(fontSize===null||fontSize===undefined||fontSize===""){
            throw Error("请输入字体大小，如 12px");
        }
        this._createCalculateElement();
        var ele = this.calculateElement;
        ele.style.fontSize=fontSize;
        ele.style.position= "fixed";
        ele.style.top="-100px";
        ele.style.left="-100px";
        ele.innerText=char;
        ele.style.display="inline-block";
        var width=ele.clientWidth;
        ele.style.display="none";
        return width;
    },
    /**
     * 
     * @param {*} text 
     * @param {*} fontSize 
     */
    getTextWidth:function(text,fontSize) {
        var total=0;
        for (var i = 0; i < text.length; i++) {
            var c = text[i];
            total+=this.getCharWidth(c,fontSize);
        }
        return total;
    },
    /**
     * 获取省略号字符段
     * @param {*} count 省略号数量，一般是3
     */
    getEllipsis:function(count) {
        if(count===null||count===undefined){
            count=3;
        }
        if(count>6){
            count=6;
        }
        var text="";
        for (var i = 0; i < count; i++) {
            text+=this.dot;
        }
        return text;
    },
    /**
     * 获取缩略图文本
     * @param {string} text 原始文本
     * @param {string} containerWidth 显示容器宽度，单位 px
     * @param {number} rowCount 文本行数
     * @param {string} fontSize 字体大小
     * @param {number} ellipsisCount 省略号数量，一般是 3个
     * @param {number} restCharCount 剩余字符数量
     * @param {number} offset 容器宽度偏移量，始终多少有点算不准，可以通过此偏移量来增加或者减小计算的容器的宽度
     */
    getEllipsisText:function(text,containerWidth,rowCount,fontSize,ellipsisCount,restCharCount,offset) {
        //需要的总宽度
        //进行适当的
        if(offset===null||offset===undefined){
            offset=0;
        }
        containerWidth+=offset;
        var needWidth=parseInt(containerWidth)*rowCount;
        var textWidth = this.getTextWidth(text,fontSize);
        //如果原始文本长度不会超出容器，则返回原始文本
        if(textWidth<needWidth){
            return text;
        }
        //省略号占用的宽度
        var ellipsisText = this.getEllipsis(ellipsisCount);
        var ellipsisTextWidth=this.getTextWidth(ellipsisText,fontSize);
        //末尾字符占用的宽度
        var restText=text.substring(text.length-restCharCount);
        var restTextWidth=this.getTextWidth(restText,fontSize);

        needWidth = needWidth-ellipsisTextWidth - restTextWidth;
        //排除已经在末尾显示的文本
        text = text.substring(0,text.length-restCharCount);
        var headText="";
        var oneLineWidth=0;
        for (var i = 0; i < text.length; i++) {
            var c = text[i];
            var charWidth=this.getCharWidth(c,fontSize);
            oneLineWidth+=charWidth;
            //省略号前最后一行
            if(oneLineWidth>=needWidth){
                break;
            }
            if(oneLineWidth>containerWidth){
                oneLineWidth=0;
                //如果一行的文本长度超过宽度了，折行部分的宽度要舍弃计算
                //因为没有半个字的说法
                if(needWidth>containerWidth){
                    needWidth-=containerWidth;
                }
            }
            headText+=c;
        }
        this._removeCalculateElement();
        return headText+ellipsisText+restText;
    },
    /**
     * 
     * @param {*} text 
     * @param {*} containerWidth 
     * @param {*} rowCount 
     * @param {*} fontSize 
     * @param {*} ellipsisCount 
     */
    getEndEllipsisText:function(text,containerWidth,rowCount,fontSize,ellipsisCount) {
        return this.getEllipsisText(text,containerWidth,rowCount,fontSize,ellipsisCount,0);
    },
};


var box7=document.querySelector("#box7");
var box8=document.querySelector("#box8");
var box7Text = ellipsisTextGenerator.getEllipsisText(box7.innerText,box7.clientWidth,2,getComputedStyle(box7).fontSize,6,10,-18);
box7.innerText=box7Text;

var box8Text = ellipsisTextGenerator.getEllipsisText(box8.innerText,box8.clientWidth,3,getComputedStyle(box8).fontSize,6,20,-35);
box8.innerText=box8Text;